<template>
    <div class="home-template">
        <header class="site-header">
            <nav class="navbar navbar-static-top main-navbar" id="top">
                <div class="container">
                    <div class="navbar-header">
                        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse"
                            data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="/" class="navbar-brand brand-bootcdn text-hide">{{ this.webInfo.title }}</a>
                    </div>
                    <nav id="bs-navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a target="_blank" href="/">反馈</a>
                            </li>
                            <li>
                                <a target="_blank" href="https://qm.qq.com/q/Ol8WteG6YO">站长交流群</a>
                            </li>
                            <li>
                                <a target="_blank" href="http://blog.anlucky.cn/">站长博客</a>
                            </li>

                        </ul>
                    </nav>
                </div>
            </nav>
            <div class="container jumbotron">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>{{ this.webInfo.title }} </h1>
                        <p>稳定、快速、免费的 API 接口服务<br><span class="package-amount">共收录了 <strong>{{ dataList.size }}</strong>
                                个接口</span>
                            ·
                            <span class="package-amount">今日调用 <strong>{{ dataList.totalTodayCallNumber }}</strong>
                                次</span>
                        </p>
                        <div class="search-wraper" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control search clearable" placeholder="找不到想要的API？试试搜索吧！"
                                    autocomplete="off" tabindex="0" autocapitalize="off" spellcheck="false"
                                    v-model="searchKeyword">
                               
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <main class="content content-boxed">
            <!--<a target="_blank" href="https://www.kuafuai.xyz"><img src="https://pic.ugcimg.cn/188115c96cafce345aec45a6430aeacc"
                                                           width="100%" alt=""></a>-->
        </main>
        <div class="container protocal-notice hidden-xs">
            <div class="row">
                <div class="col-xs-12">
                    <div class="pull-right">
                        拒绝流量劫持，全面使用 HTTPS！
                    </div>
                </div>
            </div>
        </div>

        <main class="content content-boxed">
            <div class="row row_jsxs">
                <!-- id="common-packages" -->
                <div>

                    <div v-for=" item in filteredList " :key=item.id class="col-md-4">
                        <router-link :to="'/doc/' + item.id"
                            class="block block-link-hover2 ribbon ribbon-modern ribbon-success" target="_blank">
                            <div class="ribbon-box font-w600">调用：{{ item.callNumber }}</div>
                            <div class="block-content">
                                <div class="h4 push-5">{{ item.title }}</div>
                                <p class="text-muted">{{ item.description }}</p>
                            </div>
                        </router-link>
                    </div>
                </div>
                <div id="search-results" style="display: none"></div>
            </div>
        </main>
        <footer id="footer" class="footer hidden-print">
            <div class="container">
                <div class="row">
                    <div class="footer-about col-md-4 col-sm-12" id="about">
                        <h4>关于 {{ webInfo.title }}</h4>
                        <p>{{ webInfo.title }} 是 <a href="https://blog.oioweb.cn/" target="_blank">{{ webInfo.author
                                }}</a> 支持并维护的 API
                            接口项目，致力于为用户提供稳定、快速的免费 API 接口服务平台。
                        </p>
                        <p>自2024年04月26日上线以来已经提供数 {{ dataList.totalCallNumber }} 次 API 接口服务。</p>
                        <!-- <p>反馈或建议请发送邮件至：599928887@qq.com</p> -->
                    </div>
                    <div class="footer-techs col-md-3 col-sm-12">
                        <h4>友情链接</h4>
                        <ul class="list-unstyled list-inline">
                            <li>
                                <!-- <a href="https://blog.oioweb.cn/" target="_blank">教书先生博客</a> -->
                            </li>
                            <li>
                            </li>
                        </ul>
                    </div>
                    <div class="footer-sponsors col-md-3 col-sm-12">
                        <h4>网站流量</h4>
                    </div>
                    <div class="footer-sponsors col-md-2 col-sm-12">
                        <h4>赞助我们</h4>
                        <p>
                            <!-- <img src="./教书先生API - 提供免费接口调用平台_files/encode" alt="打赏"> -->
                        </p>
                    </div>
                </div>
            </div>
            <div class="copy-right">
                <span>© 2013-2023</span>
                <a href="https://beian.miit.gov.cn/" target="_blank">{{ this.webInfo.icpinfo }}</a>
            </div>
        </footer>
        <a href="#" @click="window.scrollTo({ top: 0, behavior: 'smooth' })" id="back-to-top"><i
                class="fa fa-angle-up"></i></a>
    </div>


</template>

<script>
import indexHeader from '@/components/index/header/IndexHead.vue'
import IndexMain from '@/components/index/main/IndexMain.vue'
import IndexFoot from '@/components/index/footer/IndexFoot.vue'
import { getWebInfo, getApiInfoByIndex } from "@/api/admin/webInfo/webInfo";


export default {
    name: "Index",
    components: { indexHeader, IndexMain, IndexFoot },
    data() {
        return {
            searchKeyword: '',
            webInfo: {
                title: null,
                icpinfo: null,
                metaTags: []
            },
            dataList: {
                size: 0,
                totalCallNumber: 0,
                totalTodayCallNumber: 0,
                list: []
            }

        }
    },
    methods: {
        getWeb() {
            getWebInfo().then(response => {
                const { data } = response
                console.log(data);
                this.webInfo.title = data.title;
                this.webInfo.metaTags = [
                    { name: "keywords", content: data.keywords },
                    { name: "description", content: data.description },
                    { name: "founder", content: data.title },
                    { name: "author", content: data.author }
                ],
                    this.webInfo.icpinfo = data.icpinfo
                this.$meta().refresh();
            }).catch(error => {
                this.$message.error("获取网页数据失败")
            })
        },
        InitApiInfoDate() {
            getApiInfoByIndex().then(response => {
                const { data } = response;
                this.dataList.list = data.list
                this.dataList.size = data.size
                this.dataList.totalCallNumber = data.totalCallNumber
                this.dataList.totalTodayCallNumber = data.totalTodayCallNumber
            }).catch(error => {
                this.$message.error(error)
            })
        }
    },
    created() {
        this.getWeb();
        this.InitApiInfoDate()
    },
    computed: {
        filteredList() {
            if (this.searchKeyword === '') {
                return this.dataList.list;
            } else {
                return this.dataList.list.filter(item => {
                    return item.title.toLowerCase().includes(this.searchKeyword.toLowerCase());
                });
            }
        }
    },
    metaInfo() {
        return {
            title: this.webInfo.title,
            meta: this.webInfo.metaTags
        };
    }
}
</script>

<style></style>